<template>
  <view class="teamder-earning-container">
    <view class="data-container">
      <view class="data-content">
        <view class="today-earning">
          <view class="todat-earning-data">
            今日总预估：¥{{ earningData ? earningData.todayEarningData.totalEarning : 0 }}
          </view>
          <view></view>
        </view>
        <!-- 类型 -->
        <view class="earning-type-content">
          <view class="earning-ad">广告预估：{{ earningData ? parseFloat(earningData.todayEarningData.advOrderEarning || 0).toFixed(4) : 0 }}</view>
          <view class="earning-pay">支付分成：{{ earningData ? parseFloat(earningData.todayEarningData.memberOrderEarning || 0).toFixed(4) : 0 }}</view>
        </view>
        <!-- 数据详情 -->
        <view class="data-item-content">
          <view class="data-item">
            <view class="num">{{ earningData ? earningData.yesterdayEarningData : 0 }}</view>
            <view class="lable">昨日收益</view>
          </view>
          <view class="data-item">
            <view class="num">{{ earningData ? earningData.currentMothEarningData : 0 }}</view>
            <view class="lable">本月收益</view>
          </view>
          <view class="data-item">
            <view class="num">{{ earningData ? earningData.lastMothEarningData : 0 }}</view>
            <view class="lable">上月收益</view>
          </view>
          <view class="data-item">
            <view class="num">{{ earningData ? earningData.totalEarningData : 0 }}</view>
            <view class="lable">总收益</view>
          </view>
        </view>
      </view>
    </view>

    <view class="team-data-container">
      <!-- 团队概况 -->
      <view class="team-data-content">
        <view class="team-data-title">
          <view class="title">团队概况</view>
          <view class="more" @click="goTemaMembers">查看更多</view>
        </view>
        <view class="team-data-item-container">
          <view class="team-data-item">
            <view class="num">{{ memberCounts ? memberCounts.todayMemberCount : 0 }}</view>
            <view class="lable">今日新增</view>
          </view>

          <view class="team-data-item border-item">
            <view class="num">{{ memberCounts ? memberCounts.yesterdayMemberCount : 0 }}</view>
            <view class="lable">昨日新增</view>
          </view>

          <view class="team-data-item border-item">
            <view class="num">{{ memberCounts ? memberCounts.currentMothMemberCount : 0 }}</view>
            <view class="lable">本月新增</view>
          </view>

          <view class="team-data-item border-item">
            <view class="num">{{ memberCounts ? memberCounts.totalMemberCount : 0 }}</view>
            <view class="lable">累计人数</view>
          </view>
        </view>
      </view>

      <!-- 流水数据 -->
      <view class="team-data-content">
        <view class="team-data-title">
          <view class="title">收益概况</view>
          <view class="more" @click="goTemaEarning2">查看更多</view>
        </view>
        <!-- 导航 -->
        <view class="search-nav">
          <view class="search-type" @click="showQueryType = true;">
            <text v-if="searchForm.queryType === 1">间推流水</text>
            <text v-if="searchForm.queryType === 2">间推贡献</text>
            <text v-if="searchForm.queryType === 3">成员流水</text>
            <text v-if="searchForm.queryType === 4">成员贡献</text>
            <u-icon name="arrow-down-fill" color="#9a8b74" size="28" style="margin-left: 6rpx;"></u-icon>
          </view>
          <view class="time-type">
            <view class="time-type-item" :class="{
              'active': searchForm.queryTimeType === 1
            }"
            @click="handleQueryTimeType(1)">今日数据</view>
            <view class="time-type-item" :class="{
              'active': searchForm.queryTimeType === 2
            }"
            @click="handleQueryTimeType(2)">昨日数据</view>
            <view class="time-type-item" :class="{
              'active': searchForm.queryTimeType === 3
            }"
            @click="handleQueryTimeType(3)">全部数据</view>
          </view>

          <view class="masaike-icon">
            <image class="icon" v-if="!codingFlag" @click="codingFlag = !codingFlag" src="@/static/icon/masaike.png"></image>
            <image class="icon" v-else @click="codingFlag = !codingFlag" src="@/static/icon/masaike2.png"></image>
          </view>
        </view>

        <!-- 达人列表 -->
        <view v-if="userEarningListData && userEarningListData.length > 0" class="team-member-container">
          <view
            v-for="(item, index) in userEarningListData"
            :key="item.merchant_id"
            class="team-member-item">
            <view class="team-member-item-icon">
              <image v-if="index === 0" class="icon" src="@/static/icon/ic_rank_1_icon.png"></image>
              <image v-else-if="index === 1" class="icon" src="@/static/icon/ic_rank_2_icon.png"></image>
              <image v-else-if="index === 2" class="icon" src="@/static/icon/ic_rank_3_icon.png"></image>
              <text v-else class="lable-text">{{ index + 1 }}</text>
            </view>
            <image
              v-if="item.userInfo"
              class="user-avatar"
              :class="{
                'coding_blur': codingFlag
              }"
              :src="item.userInfo.avatar"></image>
            <view class="user-info">
              <view class="us-left">
                <view
                  class="us-name"
                  v-if="item.userInfo"
                  :class="{
                  'coding_blur': codingFlag
                  }">{{ item.userInfo.user_name }}</view>
                <view
                  class="us-id"
                  :class="{
                  'coding_blur': codingFlag
                  }">ID:{{ item.merchant_id }}</view>
              </view>
              <view class="us-right">
                <view class="us-total">{{ parseFloat(item.commission_price).toFixed(4) }}</view>
                <view class="us-id" v-if="item.userInfo">注册时间：{{ item.userInfo.created_at }}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="u-flex u-flex-col u-col-center"
          style="width: 100%;height: 48vh;background-color: #FFFFFF;">
          <view class="">
            <image style="width: 300rpx;height: 300rpx;" src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"></image>
          </view>
          <view class="u-tips-color u-font-12 u-p-t-30">
            没有数据哦~
          </view>
        </view>
      </view>
    </view>

    <!-- 选择类型 -->
    <u-select v-model="showQueryType" :list="queryTypeList" @confirm="confirmQueryType" :default-value="defaultValue"></u-select>

  </view>
</template>

<script>
  import { newMerchantEarning, getMemberCounts, getTeamEarningList } from '@/api/user.js';
  import { parseTime } from '@/utils/parseTime';
  import Title from '@/components/title/title';
  export default {
    components: {
      Title
    },
    data() {
      return {
        earningLoading: false,
        earningData: null,
        memberCounts: null,
        userEarningListData: [],
        searchForm: {
          pageSize: 10,
          pageNum: 1,
          queryTimeType: 1, // 查询时间 1 今日，2昨日，3全部
          queryType: 2 // 1 下级流水
        },
        showNoMoreFlag: true,
        showQueryType: false, // 显示类型
        codingFlag: false, // 打码
        defaultValue: [ 0 ],
        queryTypeList: [{
          value: 2,
          label: '间推贡献'
        }, {
          value: 1,
          label: '间推流水'
        }, {
          value: 3,
          label: '成员流水'
        }, {
          value: 4,
          label: '成员贡献'
        }]
      }
    },
    onLoad() {
      this.getNewMerchantEarning();
      this.getMemberCounts();
      this.getTeamEarningList();
    },
    methods: {

      // 团队收益
      goTemaEarning2() {
        uni.navigateTo({ url: '/pages/team/leaderEarning' })
      },

      // 团队成员
      goTemaMembers() {
        uni.navigateTo({ url: '/pages/team/teamMembers' })
      },

      // 选择时间类型
      confirmQueryType(item) {
        let type = item[0].value;
        let itemIndex = this.queryTypeList.findIndex(item => item.value === type);
        this.defaultValue = [ itemIndex ];
        this.showNoMoreFlag = true;
        this.searchForm.queryTimeType = 1;
        this.searchForm.queryType = type;
        this.userEarningListData = [];
        this.searchForm.pageNum = 1;
        this.getTeamEarningList();
      },

      // 点击时间查询
      handleQueryTimeType(queryTimeType) {
        this.showNoMoreFlag = true;
        this.searchForm.queryTimeType = queryTimeType;
        this.userEarningListData = [];
        this.searchForm.pageNum = 1;
        this.getTeamEarningList();
      },

      // 获取成员收益信息
      getNewMerchantEarning() {
        newMerchantEarning().then(result => {
          if (result && result.data) {
            this.earningData = result.data;
          }
        })
      },

      // 获取成员信息
      getMemberCounts() {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        getMemberCounts().then(result => {
          uni.hideLoading();
          if (result && result.data) {
            this.memberCounts = result.data;
          }
        }).catch(() => {
          uni.hideLoading();
        })
      },

      // 获取下级详情
      getTeamEarningList() {
        if (this.earningLoading) {
          return;
        }
        this.earningLoading = true;
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        getTeamEarningList(this.searchForm).then(result => {
          this.loading = false;
          this.earningLoading = false;
          uni.hideLoading();
          if (result && result.data && result.data.length > 0) {
            let listData = result.data;
            listData.forEach(item => {
              item.userInfo.created_at = parseTime(new Date(item.userInfo.created_at), '{y}-{m}-{d}');
            })
            this.userEarningListData = [...this.userEarningListData, ...listData];
            this.searchForm.pageNum = this.searchForm.pageNum + 1;
          } else {
            this.earningLoading = false;
            this.showNoMoreFlag = false;
          }
        }).catch(() => {
          this.earningLoading = false;
          uni.hideLoading();
        })
      }
    },
    // 下拉加载
    onReachBottom() {
      if (this.showNoMoreFlag) {
        this.getTeamEarningList();
      } else {
        uni.showToast({
          title: '没有更多的数据啦！',
          icon: 'none'
        })
      }
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #d0e6fc;
  }
  .teamder-earning-container{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
    .data-container{
      padding: 32rpx;
      margin-bottom: 12rpx;

      .data-content{
        border-radius: 16rpx;
        background: linear-gradient(to right, #719cfc, #477efd);
        padding: 24rpx;
      }

      .today-earning{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        margin-bottom: 24rpx;
      }

      .todat-earning-data{
        height: 48rpx;
        width: 460rpx;
        line-height: 48rpx;
        background: rgba($color: #c2b6f8, $alpha: .2);
        border-radius: 24rpx;
        padding: 0 32rpx;
      }

      .earning-type-content{
        padding: 32rpx;
        border-radius: 16rpx;
        height: 100rpx;
        background: rgba($color: #edf5fe, $alpha: 1);
        display: flex;
        color: #172B4D;
        margin-bottom: 24rpx;
      }

      .earning-ad{
        flex: 1;
      }

      .earning-pay{
        flex: 1;
        padding-left: 32rpx;
        border-left: 2rpx solid #d1d0d0;
      }

      .data-item-content{
        display: flex;
        align-items: center;
        justify-content: center;

        .data-item{
          flex: 1;
          text-align: center;

          .num{
            color: #f0edf8;
            font-size: 26rpx;
            margin-bottom: 8rpx;
            font-weight: bold;
          }

          .lable{
            font-size: 24rpx;
            color: #f0edf8;
          }
        }
      }
    }

    .team-data-container{
      flex: 1;
      padding: 32rpx;
      background-color: #fff;
      border-radius: 24rpx 24rpx 0 0;

      .team-data-content{
        .team-data-title{
          display: flex;
          justify-content: space-between;
          margin-bottom: 32rpx;
          color: $uni-color-primary;

          .title{
            color: #49453c;
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .team-data-item-container{
          padding: 32rpx;
          background-color: #fae7c7;
          border-radius: 16rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 32rpx;

          .team-data-item{
            flex: 1;
            text-align: center;
            position: relative;

            .num{
              font-weight: bold;
              font-size: 32rpx;
              margin-bottom: 8rpx;
              color: #4d3819;
            }

            .lable{
              color: #c2af8f;
            }
          }

          .border-item::after{
            content: '';
            display: block;
            height: 100%;
            width: 2rpx;
            background-color: #e4cfb0;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }

    .search-nav{
      display: flex;
      align-items: center;
      font-size: 26rpx;
      margin-bottom: 24rpx;

      .search-type{
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
        background-color: #fffaf4;
        border-radius: 8rpx;
        border: 2rpx solid #eff2df;
        color: #333;
      }

      .time-type{
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        height: 68rpx;
        line-height: 68rpx;
        background-color: #fffaf4;
        border-radius: 8rpx;
        flex: 1;

        .time-type-item{
          padding: 0 18rpx;
          color: #978f84;
          flex: 1;
        }

        .time-type-item.active{
          background-color: #f9e6c5;
          color: #7a6a48;
          border-radius: 8rpx;
        }
      }

      .masaike-icon{
        margin-left: 24rpx;

        .icon{
          width: 48rpx;
          height: 48rpx;
        }
      }
    }

    .team-member-container{
      .team-member-item{
        margin-bottom: 32rpx;
        display: flex;
        align-items: center;
      }

      .team-member-item-icon{
        width: 60rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon{
          width: 57rpx;
          height: 66rpx;
        }

        .lable-text{
          font-size: 32rpx;
          font-weight: bold;
          color: #666;
        }
      }

      .user-avatar{
        width: 120rpx;
        height: 120rpx;
        display: block;
        margin: 0 24rpx;
        border-radius: 50%;
        overflow: hidden;
        float: left;
        border: 2rpx solid #eaeaea;
      }

      .user-info{
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        flex: 1;

        .us-left{
          display: flex;
          flex-direction: column;
          width: 180rpx;

          .us-name{
            margin-bottom: 12rpx;
            color: #333;
            font-weight: bold;
            font-size: 32rpx;
            overflow: hidden; // 超出一行文字自动隐藏
            text-overflow: ellipsis; // 文字隐藏后添加省略号
            white-space: nowrap; // 强制不换行
          }
        }

        .us-id{
          color: #d6d6d6;
        }

        .us-right{
          text-align: right;
          display: flex;
          flex-direction: column;
          flex: 1;

          .us-total{
            margin-bottom: 12rpx;
            color: $uni-color-primary;
            font-weight: bold;
            font-size: 32rpx;
          }
        }
      }
    }

    .coding_blur{
      filter: blur(13px) !important;
    }
  }
</style>
